<template>
    <div>
        <mixinsObj></mixinsObj>
        <el-card>
            <el-button type="primary" @click="addOptionsList">添加</el-button>
            <TreeTable :data="treeDate" :columns="defaultProps" :selection-type="false" :expand-type="false"
                index-text="索引" :show-row-hover="false" show-index border>
                <!-- 是否有效 -->
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success" style="color: lightgreen" v-if="scope.row.cat_deleted === false"></i>
                </template>
                <!-- 排序 -->
                <template slot="sorts" slot-scope="scope">
                    <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
                    <el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
                </template>
                <!-- 操作 -->
                <template slot="caozuo" slot-scope="scope">
                    <el-button type="primary" size="mini">编辑</el-button>
                    <el-button type="danger" size="mini" @click="delCategories(scope.row.cat_id)">删除</el-button>
                </template>
            </TreeTable>
        </el-card>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="splist.pagenum" :page-sizes="[2, 3, 5, 6]" :page-size="splist.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <categoriesList  :optionsOneList="optionsOneList" :options="options" :optionsList="optionsList" @suibian="getCateList()" @one="one"></categoriesList>
    </div>
</template>
<script>
import mixinsObj from '@/views/mixins.vue'
import TreeTable from 'vue-table-with-tree-grid'
import { cateList, delList } from '@/utils/categories'
import categoriesList from '@/views/categoriesList.vue'
export default {
    components: { mixinsObj, TreeTable ,categoriesList},
    data() {
        return {
            splist: {
                pagenum: 1,
                pagesize: 5,
                type: ''
            },
            treeDate: [],
            total: 0,
            // data中的数据
            defaultProps: [
                {
                    label: "分类名称",
                    prop: "cat_name",
                },
                {
                    label: "是否有效",
                    // 表示当前列为模板列
                    type: "template",
                    // 表示当前这一列的模板名称
                    template: "isok",
                },
                {
                    label: "排序",
                    type: "template",
                    template: "sorts",
                },
                {
                    label: "操作",
                    type: "template",
                    template: "caozuo",
                },
            ],
            options:[],
            optionsList:{
                cat_pid:'',
                cat_name:'',
                cat_level:''
            },
            optionsOneList:{
                type:'',
                title:'',
                dialogFormVisible:false
            }
        }
    },
    methods: {
        async getCateList() {
            let { data: res } = await cateList(this.splist)
            this.treeDate = res.data.result
            this.total = res.data.total
        },
        handleSizeChange(val) {
            this.splist.pagesize = val
            this.getCateList()
        },
        handleCurrentChange(val) {
            this.splist.pagenum = val
            this.getCateList()
        },
       
        delCategories(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let { data: res } = await delList(id)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        async getOptions(){
            let {data:res} = await cateList({type:2})
            this.options = res.data

        },
        addOptionsList(){
            this.optionsOneList={
                type:'add',
                title:'添加分类',
                dialogFormVisible:true
            }
        },
        one(obj){
            this.optionsList=obj
        }

    },
    mounted() {
        this.getCateList()
        this.getOptions()
    }
}
</script>